<template>
    <div class="item_center" style="width: 100%">
        <n-card
            style="min-width: 400px; width: 30vw; max-width: 500px"
            hoverable
        >
            <div
                style="
                    display: flex;
                    align-items: baseline;
                    justify-content: space-between;
                "
            >
                <h1>登录</h1>
                <n-button quaternary @click="registerClick">
                    没有账号？注册一个
                </n-button>
            </div>

            <n-form
                ref="loginFormRef"
                size="large"
                label-placement="top"
                :model="formValue"
                :size="large"
                :rules="rules"
            >
                <n-form-item label="账号" path="email">
                    <n-input
                        v-model:value="formValue.email"
                        placeholder="请输入您注册的邮箱地址"
                    />
                </n-form-item>
                <n-form-item label="密码" path="password">
                    <n-input
                        v-model:value="formValue.password"
                        placeholder="请输入密码"
                        type="password"
                    />
                </n-form-item>
            </n-form>
            <n-space vertical>
                <n-button
                    @click="loginClick"
                    attr-type="button"
                    style="width: 100%"
                    type="primary"
                    size="large"
                >
                    登录
                </n-button>
            </n-space>
        </n-card>
    </div>
</template>

<script setup>
import { ref, defineComponent } from "vue";

import web_axios from "../axios";

import {
    NGi,
    NSpace,
    NButton,
    NInput,
    NForm,
    NFormItem,
    NCard,
    NSwitch,
    useDialog,
} from "naive-ui";

import { useRouter, useRoute } from "vue-router";

const dialog = useDialog();

const loginFormRef = ref(null);

const router = useRouter();
const route = useRoute();

let formValue = ref({
    email: "",
    password: "",
});
let rules = {
    email: {
        required: true,
        message: "请输入您注册的邮箱地址",
        trigger: ["input"],
    },
    password: {
        required: true,
        message: "请输入密码",
        trigger: ["input"],
    },
};
function loginClick(e) {
    loginFormRef.value.validate((errors) => {
        if (!errors) {
            web_axios
                .post("/login", {
                    email: formValue.value.email,
                    password: formValue.value.password,
                })
                .then((value) => {
                    if (
                        value.data.code === 200 &&
                        value.data.msg === "操作成功"
                    ) {
                        web_axios({
                            method: "get",
                            url: "/isRole",
                            params: { role: "student" },
                        })
                            .then((value) => {
                                if (
                                    value.data.code === 200 &&
                                    value.data.msg === "您拥有这个身份！"
                                ) {
                                    const redirect = route.query.redirect;
                                    if (redirect) {
                                        router.push(redirect);
                                    } else {
                                        router.push("/student");
                                    }
                                } else {
                                    web_axios.post("/logout");
                                    dialog.error({
                                        title: "登录错误",
                                        content: "看起来您并不是一名学生呢。",
                                        positiveText:
                                            "我想我要去注册一个学生账号",
                                    });
                                }
                            })
                            .catch((err) => {
                                web_axios.post("/logout");
                                dialog.error({
                                    title: "登录错误",
                                    content: "您遇到了一个未知的错误！",
                                    positiveText: "感觉应该去联系工程师了",
                                });
                            });
                    } else {
                        dialog.error({
                            title: "登录错误",
                            content: value.data.msg,
                            positiveText: "啊",
                        });
                    }
                    console.log(value.data);
                })
                .catch((err) => {
                    if (err.response) {
                        dialog.error({
                            title: "登录错误",
                            content: err.response.data.msg,
                            positiveText: "啊",
                        });
                    } else {
                        web_axios.post("/logout");
                        dialog.error({
                            title: "登录错误",
                            content: "您遇到了一个未知的错误！",
                            positiveText: "感觉应该去联系工程师了",
                        });
                    }
                });
        }
    });
}
</script>

<script>
export default defineComponent({
    name: "Login",
    methods: {
        registerClick(e) {
            this.$router.push({
                path: "register",
                query: {
                    redirect: this.$route.query.redirect, //当前页面的地址
                },
            });
        },
    },
});
</script>

<style></style>
